<template>
	<view class="tables">
		<view class="container">
			<view v-for="(item,i) in tables" :key="i" :class="item.status == 0 ? 'cont' : 'cont occupy'">
				<view class="name">{{item.tableName}}台球桌</view>
				<view class="status">{{item.status == 0 ? '空闲' : item.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOpenStage
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				tables:[]
			}
		},
		onLoad() {
			this.getOpenStage()
		},
		methods: {
			//台桌状态
			async getOpenStage(){
				const data = {
					storeId:3,
				}
				const {
					data: res
				} = await getOpenStage(data)
				this.tables = res.data
			},
		}
	}
</script>

<style lang="less">
	.tables {
		.container{
			margin: 32rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 32rpx 32rpx 0 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.cont{
				width: 187rpx;
				height: 161rpx;
				border: 2rpx solid #E2E2E2;
				border-radius: 8px;
				margin-bottom: 32rpx;
				overflow: hidden;
				.name{
					height: 78rpx;
					border-bottom: 2rpx solid #E2E2E2;
					text-align: center;
					line-height: 78rpx;
					font-size: 24rpx;
					color: #1E1E1E;
				}
				.status{
					height: 78rpx;
					text-align: center;
					line-height: 78rpx;
					font-size: 24rpx;
					color: #A4A4A4;
				}
			}
			.occupy{
				border-color: #DE1645;
					background: #DE1645;
				.name{
					background: #DE1645;
					color: #fff;
				}
				.status{
					background: #fff;
					color: #DE1645;
					height: 90rpx;
				}
			}
		}
	}
</style>
